<template>
  <view class="cateGory_box">
    <view class="title_name">
      <view class="control_box">
        <uni-segmented-control
          :current="current"
          :values="items.map((v) => v.title)"
          @clickItem="onClickItem"
          styleType="text"
          activeColor="#d4237a"
        ></uni-segmented-control>
      </view>
      <text class="iconfont iconsearch"></text>
    </view>
    <scroll-view
      scroll-y
      enable-flex
      class="title_conent"
      @scrolltolower="handleSroll"
    >
      <view class="content" v-for="(item, index) in allList" :key="index">
        <image :src="item.thumb" mode="widthFix" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: { uniSegmentedControl },
  data() {
    return {
      items: [
        { title: "最新", order: "new" },
        { title: "最热", order: "hot" },
      ],
      parmas: {
        limit: 30,
        skip: 0,
        order: "new",
      },
      current: 0,
      id: 0,
      allList: [],
      isMore: true,
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getList();
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
      this.parmas.order = this.items[e.currentIndex].order;
      this.parmas.skip = 0;
      this.allList = [];
      this.getList();
    },
    getList() {
      this.request({
        url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
        data: this.parmas,
      }).then((res) => {
        if (res.data.res.vertical.length === 0) {
          this.isMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
        this.allList = [...this.allList, ...res.data.res.vertical];
      });
    },
    handleSroll() {
      this.isMore = true
      if (this.isMore) {
        this.parmas.skip += this.parmas.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scope>
.cateGory_box {
  .title_name {
    position: relative;
    .control_box {
      width: 60%;
      margin: 0 auto;
      padding: 10rpx 0;
    }
    .iconsearch {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
    }
  }
  .title_conent {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 42px);
    .content {
      width: 33.33%;
      border: solid 5rpx #fff;
    }
  }
}
</style>
